<template>
  <div class="dashnoard-wrap">
    <div class="top-container-box">
      <div class="chart-container">
        <Echarts id="player-bar-charts" :option="playerBarChartsOption" />
      </div>
    </div>
    <div class="bottom-container">
      <div class="left-container">
        <div class="chart-container">
          <Echarts
            id="total-race-score-pie-charts"
            :option="totalRaceScorePieChartsOption"
          />
        </div>
      </div>
      <div class="right-container">
        <div class="chart-container">
          <Echarts
            id="time-race-line-charts"
            :option="timeRaceLineChartsOption"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "@/components/Echarts/index.vue";
import moment from "moment";

import {
  fetchPlayerBarChartsData,
  fetchTotalRaceScorePieChartsData,
  fetchTimeRaceLineChartsData,
} from "@/api/dashboard/index";
export default {
  name: "dashnoard-wrap",
  components: { Echarts },
  data() {
    return {
      backgroundColor: "#161627",
      playerBarChartsOption: {},
      totalRaceScorePieChartsOption: {},
      timeRaceLineChartsOption: {},
    };
  },
  created() {
    this.requestPlayerBarChartsData();
    this.requestTotalRaceScorePieChartsData();
    this.requestTimeRaceLineChartsData();
  },
  methods: {
    /**
     * 请求球员统计柱状图数据
     */
    async requestPlayerBarChartsData() {
      const res = await fetchPlayerBarChartsData();
      const data = res.data || [];
      const legendType = "center";
      const legendMap = [
        {
          key: "score",
          value: "得分",
          color: "#7ec050",
        },
        {
          key: "assistNumber",
          value: "助攻",
          color: "#5a9cf8",
        },
        {
          key: "foulNumber",
          value: "犯规",
          color: "#e47470",
        },
      ];
      const legendData = legendMap.map((el) => el.value);
      const seriesData = [];
      legendMap.forEach((el) => {
        const itemData = {
          name: el.value,
          type: "bar",
          barWidth: 30,
          silent: true,
          itemStyle: {
            normal: {
              color: el.color,
            },
          },
          data: data.map((item) => item[el.key]),
        };
        seriesData.push(itemData);
      });
      console.log(seriesData, "seriesData");
      // x轴
      const xAxis = data.map((el) => el.name);
      this.playerBarChartsOption = {
        backgroundColor: "#0E1327",
        grid: {
          containLabel: true,
          bottom: "5%",
          top: "20%",
          left: "5%",
          right: legendType === "center" ? "5%" : "25%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          orient: legendType === "center" ? "horizontal" : "vertical",
          top: legendType === "center" ? "10%" : "center",
          right: legendType === "center" ? "center" : "2%",
          data: legendData,
          itemWidth: 18,
          itemHeight: 18,
          itemGap: 40,
          icon: "rect",
          textStyle: {
            fontSize: 18,
            color: "#fff",
            padding: [5, 0, 0, 2],
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },
          },
        },
        xAxis: {
          triggerEvent: true,
          data: xAxis,
          axisLabel: {
            show: true,
            fontSize: 14,
            color: "#fff",
            align: "center",
            verticalAlign: "top",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: true,
            lineStyle: {
              show: true,
              color: "#0B3561",
              width: 2,
            },
          },
        },
        yAxis: [
          {
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 18,
              color: "#fff",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: "solid",
                color: "#0B3561",
              },
            },
          },
        ],
        series: seriesData,
      };
    },
    /**
     * 请求球队成绩饼图数据
     */
    async requestTotalRaceScorePieChartsData() {
      const res = await fetchTotalRaceScorePieChartsData();
      const data = res.data || {
        success: 0,
        failed: 0,
        ping: 0,
      };
      this.totalRaceScorePieChartsOption = {
        title: {
          text: "球队胜负占比",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          show: true,
          formatter: "{b}:{c}场 - {d}%",
        },
        legend: {
          orient: "vertical",
          left: "bottom",
        },
        series: [
          {
            name: "球队胜负占比",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: data.success,
                name: "胜利",
                itemStyle: {
                  color: "#d67a74",
                },
                select: {
                  itemStyle: { shadowColor: "#5470c6", color: "#d67a74" },
                },
              },
              {
                value: data.failed,
                name: "失败",
                itemStyle: {
                  color: "#8dbe5f",
                },
                select: {
                  itemStyle: { shadowColor: "#91cc75", color: "#8dbe5f" },
                },
              },
              {
                value: data.ping,
                name: "平局",
                itemStyle: {
                  color: "#f2ca6b",
                },
                select: {
                  itemStyle: { shadowColor: "#fac858", color: "#f2ca6b" },
                },
              },
            ],
            selectedMode: true,
            selectedOffset: 15,
            select: {
              itemStyle: {
                shadowBlur: 10,
              },
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              disabled: true,
            },
          },
        ],
      };
    },
    /**
     * 请求球队各项得分走势折线图数据
     */
    async requestTimeRaceLineChartsData() {
      const res = await fetchTimeRaceLineChartsData();
      const data = res?.data || [];
      const legendMap = [
        {
          key: "score",
          value: "得分",
        },
        {
          key: "foulTotalNumber",
          value: "犯规",
        },
        {
          key: "assistTotalNumber",
          value: "助攻",
        },
        {
          key: "outstandingTotalNumber",
          value: "过人",
        },
        {
          key: "diveTotalNumber",
          value: "扑救",
        },
        {
          key: "helpTotalNumber",
          value: "解围总数",
        },
      ];
      const colorArr = ["#8E35FF", "#FFB933", "#44C558", "#2F8FFF"];
      const legendData = legendMap.map((el) => el.value);
      const xAxis = data.map((el) => moment(el.startTime).format("YYYY-MM-DD"));
      const seriesData = legendMap.map((item1, index1) => {
        return {
          name: item1.value,
          type: "line",
          symbol: "circle",
          symbolSize: 1,
          itemStyle: {
            color: colorArr[index1],
          },
          lineStyle: {
            width: 2,
          },
          data: data.map((el) => el[item1.key]), // 折线图的数据
        };
      });
      this.timeRaceLineChartsOption = {
        backgroundColor: this.backgroundColor,
        grid: {
          containLabel: true,
          bottom: "10%",
          top: "15%",
          left: "5%",
          right: "5%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: "1%",
          right: "1%",
          data: legendData || [],
          itemGap: 10,
          textStyle: {
            fontSize: 12,
            color: "#FFF",
          },
        },
        xAxis: {
          triggerEvent: true,
          data: xAxis || [],
          axisLabel: {
            interval: 0,
            show: true,
            fontSize: 12,
            color: "#FFF",
          },
          axisLine: {
            show: false,
            lineStyle: {
              show: false,
              color: "#F3F3F3",
              width: 1,
            },
          },

          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "球队各项分数走势图",
            type: "value",
            nameTextStyle: {
              color: "#FFF",
              fontSize: 12,
              padding: [0, 0, 0, 20],
            },
            splitNumber: 4,
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#FFF",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#3E4A82",
              },
            },
          },
        ],
        series: seriesData,
      };
    },
  },
};
</script>

<style scoped>
.dashnoard-wrap {
  background-color: #161627;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.top-container-box {
  width: 100%;
  height: 50%;
  padding-bottom: 10px;
}
.bottom-container {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
}
.left-container {
  width: 50%;
  height: 100%;
  padding-right: 5px;
}
.right-container {
  width: 50%;
  height: 100%;
  padding-left: 5px;
}
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
